/*

This is a simple include in your header that will load in the associative stylesheet for your screen size 
to allow for rescaling without the use of media queries.

There are two benefits to using this script over media-queries...

1. Works across *all* browsers including the old stubborn ones like IE6

2. Can potentially save on bandwidth by calling smaller CSS files only when needed.


There are downsides of course to using this script...

1. To ensure it works without javascript enabled, we must clutter up the header with the weird embed code

Embed Code Example

<script></script>
<noscript>
<link>
</noscript>
 
*/
(function (win, undefined) {
    "use strict";
      
    var 
    	ua = nav.userAgent.toLowerCase(),
    	mob = /mobile|midp/.test(ua),
    	doc = win.document,
        nav = win.navigator,
        loc = win.location,
        html = doc.documentElement,
        c = 0,    
		// dynamic typography css php script location
		url = "../css/type.css.php",
		id = "dynamic_type";

	var options = {
		// specify screen sizes and their associated settings...
		screens  : [240, 320, 480, 640, 768, 800, 1024, 1280, 1440, 1680, 1920],        
		settings : 0
	};
        
    // Creates the css URL with our matching options...
	function composeQuery()
	{
		var q = '';
		return '?' + q;
	};

	function loadCSS( css )
	{
		//var nodes = document.getElementsByTagName("link") ;
		var node = document.getElementsById( id ) ;
		// if nodes is empty, add the defaults styleshhet and exit
		
		
		$element.prop('disabled',true); 
		if (document.createStyleSheet) 
		{
			// stupid ie 8 ;(
			document.createStyleSheet( css );
		}else{
	   		// ( minus their query string and hash values )
	   		// add in our new stylesheet file
	   		// then replace the original CSS attribute with the new one
	   		$element.attr('href', replacement );
	   		// TODO : Monitor loading
	   		$element.prop('disabled',false); 
	   	}
	   	
	   	var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
	   	
	};
	
	
	function replaceStylesheet (argument) 
	{
	   document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
	}
		
	function removeStylesheet(theHref) 
	{
	    var sheets = document.styleSheets;
	    for (i=0; i<sheets.length; i++) if (sheets[i].href == theHref) sheets[i].disabled = true;
	    
	};
 
	function addStylesheet(theHref) 
	{
		if(document.createStyleSheet) {
			document.createStyleSheet(theHref);
		} else {
			var newSheet=document.createElement('link');
			newSheet.setAttribute('rel','stylesheet');
			newSheet.setAttribute('type','text/css');
			newSheet.setAttribute('href',theHref);
			document.getElementsByTagName('head')[0].appendChild(newSheet);
		}
  };
  
// Throttle navigators from triggering too many resize events
    function onResize() 
    {
        win.clearTimeout(resizeId);
        c = win.setTimeout(onResized, 100);
    };
    
    function onResized()
    {
  
            
    	var iw = win.innerWidth  || html.clientWidth,
    		ow = win.outerWidth || win.screen.width,
    		h = win.innerHeight,
    		p = h > w,
			s = p ? w : h;
		// now loop through our screen sizes from low to high...
		// ( w > 640)
		loadCSS( url + composeQuery() );
    };
    
    // Manually attach a listener for screen size changes ( as to not overwrite existing handler )
    if (win.addEventListener) win.addEventListener("resize", onResize, false);
	else win.attachEvent("onresize", onResize);   
    // and immediately call
    onResized();
    
})(window);